<template>
  <div class="resource-container">
    <!-- 顶部标题 -->
    <div class="resource-header">
      <h2>技术资源</h2>
      <p class="subtitle">精选优质技术资源，助力开发学习</p>
    </div>

    <!-- 资源分类导航 -->
    <div class="category-nav">
      <a-radio-group v-model="currentCategory" button-style="solid">
        <a-radio-button value="docs">
          <a-icon type="book" />
          技术文档
        </a-radio-button>
        <a-radio-button value="tools">
          <a-icon type="tool" />
          开发工具
        </a-radio-button>
        <a-radio-button value="community">
          <a-icon type="team" />
          技术社区
        </a-radio-button>
        <a-radio-button value="learning">
          <a-icon type="read" />
          学习平台
        </a-radio-button>
        <a-radio-button value="books">
          <a-icon type="book" />
          经典书籍
        </a-radio-button>
      </a-radio-group>
    </div>

    <!-- 资源卡片列表 -->
    <div class="resource-grid">
      <a-card v-for="item in currentResources" 
        :key="item.id" 
        class="resource-card"
        :hoverable="true"
        @click="openLink(item.url)"
      >
        <template slot="cover">
          <div class="card-cover" :style="{ backgroundColor: item.bgColor }">
            <img :src="item.logo" :alt="item.name">
          </div>
        </template>
        <a-card-meta :title="item.name">
          <template slot="description">
            <p class="card-desc">{{ item.description }}</p>
            <div class="card-tags">
              <a-tag v-for="tag in item.tags" 
                :key="tag" 
                :color="getTagColor(tag)"
              >
                {{ tag }}
              </a-tag>
            </div>
          </template>
        </a-card-meta>
      </a-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Resource',
  data() {
    return {
      currentCategory: 'docs',
      resources: {
        docs: [
          {
            id: 1,
            name: 'MDN Web Docs',
            description: 'Mozilla 的开发者平台，提供全面的 Web 技术文档',
            url: 'https://developer.mozilla.org/',
            logo: 'https://developer.mozilla.org/mdn-social-share.cd6c4a5a.png',
            bgColor: '#212121',
            tags: ['Web', '前端', '文档']
          },
          {
            id: 2,
            name: 'Vue.js',
            description: '渐进式 JavaScript 框架的官方文档',
            url: 'https://cn.vuejs.org/',
            logo: 'https://cn.vuejs.org/logo.svg',
            bgColor: '#41B883',
            tags: ['Vue', '框架', '文档']
          },
          {
            id: 3,
            name: 'React',
            description: '用于构建用户界面的 JavaScript 库',
            url: 'https://react.dev/',
            logo: 'https://react.dev/favicon.ico',
            bgColor: '#61DAFB',
            tags: ['React', '框架', '文档']
          },
          {
            id: 4,
            name: 'Node.js',
            description: '基于 Chrome V8 引擎的 JavaScript 运行时',
            url: 'https://nodejs.org/zh-cn',
            logo: 'https://nodejs.org/static/images/logo.svg',
            bgColor: '#333333',
            tags: ['Node.js', '后端', '文档']
          },
          {
            id: 5,
            name: 'TypeScript',
            description: 'JavaScript 的超集，添加了类型系统',
            url: 'https://www.typescriptlang.org/',
            logo: 'https://www.typescriptlang.org/favicon-32x32.png',
            bgColor: '#3178C6',
            tags: ['TypeScript', '前端', '文档']
          },
          {
            id: 6,
            name: 'Rust',
            description: '安全、并发、实用的系统编程语言',
            url: 'https://www.rust-lang.org/zh-CN/',
            logo: 'https://www.rust-lang.org/static/images/rust-logo-blk.svg',
            bgColor: '#000000',
            tags: ['Rust', '系统编程', '文档']
          }
        ],
        tools: [
          {
            id: 7,
            name: 'VS Code',
            description: '强大的代码编辑器，支持丰富的插件生态',
            url: 'https://code.visualstudio.com/',
            logo: 'https://code.visualstudio.com/favicon.ico',
            bgColor: '#0066B8',
            tags: ['编辑器', '开发工具']
          },
          {
            id: 8,
            name: 'GitHub',
            description: '代码托管平台，开源项目的聚集地',
            url: 'https://github.com/',
            logo: 'https://github.com/favicon.ico',
            bgColor: '#24292E',
            tags: ['代码托管', '版本控制']
          },
          {
            id: 9,
            name: 'CodePen',
            description: '在线代码编辑器，前端开发者的游乐场',
            url: 'https://codepen.io/',
            logo: 'https://codepen.io/favicon.ico',
            bgColor: '#47CF73',
            tags: ['在线编辑器', '代码分享']
          },
          {
            id: 10,
            name: 'Postman',
            description: 'API 开发测试工具，简化接口调试流程',
            url: 'https://www.postman.com/',
            logo: 'https://www.postman.com/_ar-assets/images/favicon-1-48.png',
            bgColor: '#FF6C37',
            tags: ['API', '测试工具']
          },
          {
            id: 11,
            name: 'Docker',
            description: '容器化平台，简化应用部署和分发',
            url: 'https://www.docker.com/',
            logo: 'https://www.docker.com/wp-content/uploads/2023/04/cropped-Docker-favicon-32x32.png',
            bgColor: '#2496ED',
            tags: ['容器化', '部署工具']
          },
          {
            id: 12,
            name: 'Figma',
            description: '专业的在线设计工具，支持协作',
            url: 'https://www.figma.com/',
            logo: 'https://www.figma.com/favicon.ico',
            bgColor: '#1E1E1E',
            tags: ['设计工具', 'UI/UX']
          }
        ],
        community: [
          {
            id: 13,
            name: 'Stack Overflow',
            description: '全球最大的技术问答社区',
            url: 'https://stackoverflow.com/',
            logo: 'https://stackoverflow.com/favicon.ico',
            bgColor: '#F48024',
            tags: ['问答', '社区']
          },
          {
            id: 14,
            name: '掘金',
            description: '中国专业的开发者社区',
            url: 'https://juejin.cn/',
            logo: 'https://juejin.cn/favicon.ico',
            bgColor: '#007FFF',
            tags: ['技术社区', '中文']
          },
          {
            id: 15,
            name: 'GitHub Discussions',
            description: 'GitHub 的开发者讨论社区',
            url: 'https://github.com/discussions',
            logo: 'https://github.com/favicon.ico',
            bgColor: '#24292E',
            tags: ['讨论', '开源社区']
          },
          {
            id: 16,
            name: 'V2EX',
            description: '创意工作者的社区',
            url: 'https://v2ex.com/',
            logo: 'https://v2ex.com/favicon.ico',
            bgColor: '#1C1C1C',
            tags: ['技术社区', '中文']
          },
          {
            id: 17,
            name: 'DEV Community',
            description: '开发者分享和交流的平台',
            url: 'https://dev.to/',
            logo: 'https://dev.to/favicon.ico',
            bgColor: '#0A0A0A',
            tags: ['博客', '社区']
          },
          {
            id: 18,
            name: 'Reddit Programming',
            description: 'Reddit 的编程社区',
            url: 'https://www.reddit.com/r/programming/',
            logo: 'https://www.reddit.com/favicon.ico',
            bgColor: '#FF4500',
            tags: ['讨论', '社区']
          }
        ],
        learning: [
          {
            id: 19,
            name: 'LeetCode',
            description: '程序员刷题首选平台',
            url: 'https://leetcode.cn/',
            logo: 'https://leetcode.cn/favicon.ico',
            bgColor: '#FFA116',
            tags: ['算法', '面试']
          },
          {
            id: 20,
            name: 'Coursera',
            description: '全球知名的在线教育平台',
            url: 'https://www.coursera.org/',
            logo: 'https://www.coursera.org/favicon.ico',
            bgColor: '#0056D2',
            tags: ['在线课程', '教育']
          },
          {
            id: 21,
            name: 'freeCodeCamp',
            description: '免费学习编程的开源社区',
            url: 'https://www.freecodecamp.org/chinese/',
            logo: 'https://www.freecodecamp.org/favicon-32x32.png',
            bgColor: '#0A0A23',
            tags: ['编程学习', '实践']
          },
          {
            id: 22,
            name: 'Codecademy',
            description: '交互式编程学习平台',
            url: 'https://www.codecademy.com/',
            logo: 'https://www.codecademy.com/favicon.ico',
            bgColor: '#204056',
            tags: ['编程学习', '互动']
          },
          {
            id: 23,
            name: 'Udemy',
            description: '全球最大的在线学习市场',
            url: 'https://www.udemy.com/',
            logo: 'https://www.udemy.com/favicon.ico',
            bgColor: '#A435F0',
            tags: ['在线课程', '实战']
          },
          {
            id: 24,
            name: 'CS50',
            description: '哈佛大学著名的计算机科学课程',
            url: 'https://cs50.harvard.edu/',
            logo: 'https://cs50.harvard.edu/favicon.ico',
            bgColor: '#A41034',
            tags: ['计算机科学', '基础课程']
          }
        ],
        books: [
          {
            id: 25,
            name: 'JavaScript高级程序设计',
            description: 'JavaScript 红宝书，前端必读经典',
            url: 'https://www.ituring.com.cn/book/2472',
            logo: 'https://file.ituring.com.cn/SmallCover/2204a9dee6c8e92cf319',
            bgColor: '#F7DF1E',
            tags: ['JavaScript', '书籍']
          },
          {
            id: 26,
            name: '深入理解计算机系统',
            description: 'CSAPP，计算机系统经典教材',
            url: 'https://www.cs.cmu.edu/~213/',
            logo: 'https://www.cs.cmu.edu/favicon.ico',
            bgColor: '#4B5320',
            tags: ['计算机系统', '书籍']
          },
          {
            id: 27,
            name: '算法导论',
            description: '算法领域的圣经级教材',
            url: 'https://mitpress.mit.edu/books/introduction-algorithms-fourth-edition',
            logo: 'https://mitpress.mit.edu/favicon.ico',
            bgColor: '#000000',
            tags: ['算法', '书籍']
          },
          {
            id: 28,
            name: '设计模式',
            description: 'GoF 的设计模式，软件设计经典',
            url: 'https://refactoringguru.cn/design-patterns',
            logo: 'https://refactoringguru.cn/images/favicon.png',
            bgColor: '#02303A',
            tags: ['设计模式', '书籍']
          }
        ]
      }
    }
  },
  computed: {
    currentResources() {
      return this.resources[this.currentCategory] || []
    }
  },
  methods: {
    getTagColor(tag) {
      const colors = {
        '前端': 'blue',
        '框架': 'green',
        '文档': 'purple',
        '编辑器': 'orange',
        '开发工具': 'cyan',
        '代码托管': 'pink',
        '版本控制': 'red',
        '在线编辑器': 'gold',
        '问答': 'lime',
        '社区': 'geekblue',
        '技术社区': 'volcano',
        '中文': 'magenta',
        '算法': 'purple',
        '面试': 'blue',
        '在线课程': 'green',
        '教育': 'cyan'
      }
      return colors[tag] || 'blue'
    },
    openLink(url) {
      window.open(url, '_blank')
    }
  }
}
</script>

<style scoped>
.resource-container {
  padding: 24px;
  max-width: 1200px;
  margin: 0 auto;
}

.resource-header {
  text-align: center;
  margin-bottom: 40px;
}

.resource-header h2 {
  font-size: 32px;
  color: #1f2937;
  margin-bottom: 8px;
}

.subtitle {
  color: #6b7280;
  font-size: 16px;
}

.category-nav {
  text-align: center;
  margin-bottom: 40px;
}

.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  padding: 0 16px;
}

.resource-card {
  transition: all 0.3s ease;
}

.resource-card:hover {
  transform: translateY(-4px);
}

.card-cover {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.card-cover img {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}

.card-desc {
  margin-bottom: 12px;
  color: #4b5563;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .resource-container {
    padding: 16px;
  }

  .resource-header h2 {
    font-size: 24px;
  }

  .resource-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    padding: 0 8px;
  }
}

/* 暗色主题适配 */
@media (prefers-color-scheme: dark) {
  .resource-header h2 {
    color: #e5e7eb;
  }

  .subtitle {
    color: #9ca3af;
  }

  .card-desc {
    color: #9ca3af;
  }
}
</style> 